<template>
  <div class="home">

    <div class="home" id="home">

    </div>
  </div>
</template>
<style scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>
<script>

// 引入three.js
import * as THREE from 'three';
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader";
// import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass'
import { SSRPass } from 'three/examples/jsm/postprocessing/SSRPass';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { Reflector } from 'three/examples/jsm/objects/Reflector';
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GUI } from 'lil-gui';
var scene = null
var camera = null
var renderer = null;
var controls = null;
var renderTarget = null;
var rtCubeCamera = null;
var rtCubeCameraLayer = 1;
var dynamicMap = null
var ssrPass = null
var composer = null;
var gui=null
export default {
  name: 'HomeView',


  data() {
    return {

    }
  },
  mounted() {
    this.getScene()
gui=new GUI()
//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';
gui.addColor(scene, 'background').onChange((e)=>{
console.log(e)
}).name('背景颜色');
const obj = {
    color:"#b3b3ff",
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
  scene.getObjectByName("911").traverse((el) => {
    if(el.isMesh == true){
      if (el.material.name === 'paint') {
      el.material.color.set(value)
    }
    }

  })
}).name("车身颜色")
  },
  methods: {
    dianji() {
      console.log(scene.getObjectByName("911"))
    },
    getScene() {
      renderTarget = new THREE.WebGLCubeRenderTarget(200);
      renderTarget.texture.type = THREE.HalfFloatType
      rtCubeCamera = new THREE.CubeCamera(1, 1000, renderTarget);
      dynamicMap = renderTarget.texture;

      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera();
      camera.position.set(10, 10, 10)
      camera.lookAt(0, 0, 0)
      //环境光:没有特定方向，整体改变场景的光照明暗
      const ambient = new THREE.AmbientLight(0xffffff, 0.4);
      scene.add(ambient);
      const pointLight = new THREE.SpotLight(0xffffff, 300.0, 0, 0.3, 1)
      pointLight.position.set(0, 15, 0)
      pointLight.castShadow = true
      pointLight.shadow.autoUpdate = false
      pointLight.shadow.bias = -0.0001
      scene.add(pointLight)
      const axesHelper = new THREE.AxesHelper(100);
      scene.add(axesHelper);
      const directionlight = new THREE.DirectionalLight(0xffffff, 0.5);
      scene.add(directionlight);
      scene.background = new THREE.Color(0x000000);
      scene.background.setRGB(0.01, 0.005, 0.05)
      //模糊度
      scene.backgroundBlurriness = 0.5
      scene.userData.rtCubeCameraLayer = 1
      scene.userData.dynamicMap = dynamicMap
      const loader = new GLTFLoader();
      const dracoloader = new DRACOLoader();
      dracoloader.setDecoderPath("./libs/draco/gltf/");
      loader.setDRACOLoader(dracoloader);
      loader.load("./911-draco.glb", (e) => {
        e.scene.name = "911"
        scene.add(e.scene);
        console.log(scene.getObjectByName("911"))
        scene.getObjectByName("911").traverse((el) => {

          if (el.isMesh == true) {
            //产生阴影
            el.castShadow = true
            //接收阴影
            el.receiveShadow = true
            el.material.envMap = scene.userData.dynamicMap;
            if (el.material.name == 'rubber') {

              el.material.color.set("#222")
              el.material.roughness = 1;
              el.material.normalScale.set(4, 4)
              el.material.envMap = scene.userData.dynamicMap
            }
            if (el.material.name == 'window') {
              el.material.color.set("#222")
              el.material.roughness = 0;
              el.material.clearcoat = 0.1

              el.material.envMap = scene.userData.dynamicMap
              console.log(el)
            }
            if (el.material.name === 'coat') {
              el.material.envMapIntensity = 4
              el.material.roughness = 0.5
              el.material.metalness = 1
              el.material.envMap = scene.userData.dynamicMap
            }
            if (el.material.name === 'paint') {
              el.material.envMapIntensity = 2
              el.material.roughness = 0.45
              el.material.metalness = 0.8
              el.material.envMap = scene.userData.dynamicMap
              el.material.color.set("#b3b3ff")
            }
          }
        })
        scene.getObjectByProperty("type", "SpotLight").shadow.needsUpdate = true

      })
      console.log(scene)
      const plainGeomatry = new THREE.PlaneGeometry(10, 10);
      const planmaterial = new THREE.MeshStandardMaterial({
        color: "#7780a6",
        side: THREE.FrontSide,
        envMap: scene.userData.dynamicMap,
        envMapIntensity: 0.8,
        roughness: 0.2,
        metalness: 0.8
      })
      const plainmesh = new THREE.Mesh(plainGeomatry, planmaterial);
      plainmesh.layers.enable(scene.userData.rtCubeCameraLayer)
      plainmesh.receiveShadow = true
      plainmesh.rotateX(-Math.PI / 2)
      plainmesh.position.y -= 1
      scene.add(plainmesh)
      //创建反射汽车平面
      const reflector = new Reflector(plainGeomatry, {
        textureWidth: window.innerWidth,
        textureHeight: window.innerHeight,
        clipBias: 0.003,
        color: 0x777777,
        recursion: 1
      });
      reflector.rotateX(-Math.PI / 2)
      reflector.position.y -= 0.9
      scene.add(reflector);
      renderer = new THREE.WebGL1Renderer({
        antialias: true
      });
      renderer.shadowMap.enable = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;


      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
      //后处理渲染器
      composer = this.initCompose(renderer, scene, camera)
      composer.render()
      function rendercom() {
        renderer.render(scene, camera);
        window.requestAnimationFrame(rendercom)
      }
      rendercom()

      // renderer.setClearColor(0xb9d3ff, 0.9);
      document.getElementById("home").appendChild(renderer.domElement);
      controls = new OrbitControls(camera, renderer.domElement);
      controls.addEventListener('change', () => {
        // renderer.render(scene, camera)
        composer.render()

      })

      //反光效果
      rtCubeCamera.update(renderer, scene)
    },
    initCompose(renderer, scene, camera) {
      const renderScene = new RenderPass(scene, camera)
      //辉光处理通道
      const bloomPass = new UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1.5,
        0.4,
        0.85
      )
      const parameters = {
        bloomStrength: 0.3,
        bloomThreshold: 0.1,
        bloomRadius: 0.6,
      }

      bloomPass.threshold = parameters.bloomThreshold
      bloomPass.strength = parameters.bloomStrength
      bloomPass.radius = parameters.bloomRadius
      //抗锯齿
      const fxaaPass = new ShaderPass(FXAAShader);
      // const pixelRatio = renderer.getPixelRatio();
      const pixelRatio = renderer.getPixelRatio();
      fxaaPass.material.uniforms['resolution'].value.x = 1 / (window.innerWidth * pixelRatio);
      fxaaPass.material.uniforms['resolution'].value.y = 1 / (window.innerHeight * pixelRatio);
      ssrPass = new SSRPass({
        renderer,
        scene,
        camera,
        width: window.innerWidth,
        height: window.innerHeight,
        groundReflector: null,
        selects: []

      })
      const outputPass = new OutputPass();
      //输出
      const composer = new EffectComposer(renderer)
      composer.addPass(renderScene)
      composer.addPass(ssrPass)
      composer.addPass(bloomPass)
      composer.addPass(outputPass)
      composer.addPass(fxaaPass)
      return composer



    }
  }
}
</script>
